<template>
    <div :style="{margin: '20px'}">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-input v-model="$route.query.roleName" size="normal" disabled :style="{marginBottom: '20px'}"></el-input>

            <el-tree ref="tree" :data="treeList" :props="treeProp" node-key="id" show-checkbox
                :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
                @node-click="handleNodeClick"></el-tree>

        </el-card>

    </div>
</template>
<script>
import aclRoleApi from '@/api/aclRole';
export default {
    name: 'Auth',
    data() {
        return {
            treeList: [],
            treeProp: {
                children: 'children',
                label: 'name'
            }
        };
    },
    mounted() {
        this.getTreeList()
    },
    methods: {
        async getTreeList() {
            try {
                const result = await aclRoleApi.getTreeList(this.$route.query.id)
                if (result.code === 20000) {
                    this.treeList = result.data.children
                }
            } catch (error) {

            }
        },
        handleNodeClick(data) {
            console.log(data);
        }
    },
    computed: {
        defaultExpanded() {
            let arr = []
            function filterId(treeList) {
                treeList.forEach(item => {
                    if (item.children && item.children.length) filterId(item.children)
                    arr.push(item.id)
                })
            }
            filterId(this.treeList)
            return arr
        },
        defaultChecked() {
            let arr = []
            function filterSelect(treeList) {
                treeList.forEach(item => {
                    if (item.children && item.children.length) filterSelect(item.children)
                    else {
                        if (item.select) arr.push(item.id)
                    }
                })
            }
            filterSelect(this.treeList)
            return arr
        }
    }
}
</script>

<style lang='less' scoped>

</style>
